<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="React"></div>

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    // 老的不用了， 即将弃用了
    // UNSAFE_componentWillReceiveProps
    // UNSAFE_componentWillMount
    // UNSAFE_componentWillUpdate

    class Count extends React.Component {

        // 初始化状态
        state = {count: 0}

        // 加1按钮回调
        add = () => {
            let {count} = this.state
            this.setState({count: count + 1})
        }

        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById("React"))
        }

        // 强制更新按钮回调
        force = () => {
            this.forceUpdate()
        }

        constructor(props) {
            super(props);
            console.log("1构造器")
        }

        // 要么返回null，要么返回一个state对象, 不以定义的state为主了， 以这个返回的为主
        // 用的场景及其罕见
        static getDerivedStateFromProps(props, state) {
            console.log("getDerivedStateFromProps", props, state)
            // return {count: 108}
            // return props
            return null
        }

        render() {
            let {count} = this.state
            console.log("render")
            return (
                    <div>
                        <h2>当前求和为{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新下</button>
                    </div>
            )
        }

        // 组件挂载完毕
        componentDidMount() {
            console.log("4componentDidMount组件挂载完毕")
        }



        // 应该组件更新, 默认为真，子类重写抽象类的方法进行控制， 说白了就是面向对象的 模版方法设计模式
        shouldComponentUpdate() {
            console.log("shouldComponentUpdate")
            return true
        }

        // 更新前获取快照值
        getSnapshotBeforeUpdate(prevProps) {
            console.log("getSnapshotBeforeUpdate", prevProps)
            return "df"
        }

        // 组件更新完毕
        componentDidUpdate(prevProps, prevState, snapshotValue) {
            console.log("组件更新完毕componentDidUpdate",prevProps, prevState, snapshotValue)
        }

        // 组件将要卸载
        componentWillUnmount() {
            console.log("componentWillUnmount组件将要卸载")
        }
    }



    ReactDOM.render(<Count count={199}/>, document.getElementById("React"))
</script>
</body>
</html>